<template>
	<view class="pet-information select-menu" @click="handleClick">
		<view class="placeholder" v-if="!form.transport_type">
			请选择宠物信息
		</view>
		<view class="value" v-else>
			{{  form.transport_type == 1?'宠物独行':'人宠同行'}}
		</view>
		<image class="right-icon" src="@/static/image/right.png"></image>
	</view>
	<up-popup :show="show" @close="show = false" :safeAreaInsetBottom="false">
		<view class="popup">
			<image class="popup-top-bj" src="@/static/image/popup-bj.png"></image>
			<view class="popup-content lint-content">
				<view class="title">
					宠物信息
				</view>
				<view class="desc">
					平台只允许发布宠物，严禁发布保护动物！
				</view>
				<!-- 滚动区域 -->
				<view class="rolling-region">
					<view class="type-line">
						<view class="line">
							<up-button @click="form.transport_type = 1, form.people_num = '', form.luggage_info = ''"
								:type="form.transport_type == 1?'primary':'info'" text="宠物独行"></up-button>
						</view>
						<view class="line">
							<up-button @click="form.transport_type = 2"
								:type="form.transport_type == 2?'primary':'info'" text="人宠同行"></up-button>
						</view>
					</view>
					<template v-if="form.transport_type == 2">
						<view class="line">
							<view class="required">*</view>
							<view class="label">选择人数</view>
							<view class="value">
								<PetPeople ref="PetPeopleRef" :data="people" :value="form.people_num"
									@change="form.people_num = $event" />
							</view>
						</view>
						<view class="line">
							<view class="required">*</view>
							<view class="label">行李</view>
							<view class="value">
							<input v-model="form.luggage_info" placeholder="请输入行李"
								placeholder-class="line-input-placeholder">
							</view>
						</view>
					</template>
					<view class="line">
						<view class="required">*</view>
						<view class="label">宠物品种</view>
						<view class="value">
							<PetBreed ref="PetBreedRef" :data="breed" :value="[form.pet_pid,form.pet_category]" @change="form.pet_category = $event" />
						</view>
					</view>
					<view class="line">
						<view class="required">*</view>
						<view class="label">数量</view>
						<view class="value">
							<input v-model="form.pet_nums" type="number" placeholder="请输入宠物数量"
								placeholder-class="line-input-placeholder">
						</view>
					</view>
					<view class="line nflex">
						<view class="required">*</view>
						<view class="label">重量（kg）</view>
						<view class="content">
							<view class="item" :class="form.pet_weight == item.id&&'checked'"
								@click="form.pet_weight = item.id" v-for="(item, index) in weight" :key="index">
								{{ item.name }}
							</view>
							<view class="i"></view>
							<view class="i"></view>
						</view>
					</view>
					<view class="line">
						<view class="required">*</view>
						<view class="label">笼具方式</view>
						<view class="value">
							<PetCage ref="PetCageRef" :data="cage" :value="[form.cage_pid, form.cage_type]" @change="form.cage_type = $event" />
						</view>
					</view>
					<view class="line nflex">
						<view class="required">*</view>
						<view class="top">
							<view class="label">添加图片</view>
							<view class="desc">添加爱宠照片，最多三张</view>
						</view>
						<view class="content">
							<view class="upload" v-for="(item, index) in 3" :key="index">
								<Upload :url="form.pet_img[index]" @change="form.pet_img[index] = $event" />
							</view>
						</view>
					</view>
					<view class="line nflex">
						<view class="label">备注<span class="desc">（可不填）</span></view>
						<textarea v-model="form.order_remark" placeholder="请在填写备注时避免出现手机号等个人信息, 以防隐私泄露"
							placeholder-class="line-input-placeholder"></textarea>
						<view class="textarea-num" v-if="form.order_remark">
							{{ form.order_remark.length }}/40
						</view>
					</view>
				</view>
				<view class="popup-bottom">
					<view class="">
						<up-button @click="show = false" type="info" text="取消"></up-button>
					</view>
					<view class="">
						<up-button @click="handleSumbit" type="primary" text="确定"></up-button>
					</view>
				</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import PetPeople from './pet_people.vue'
	import PetBreed from './pet_breed.vue'
	import PetCage from './pet_cage.vue'
	import Upload from '@/components/Upload.vue'
	import {
		ref,
		onMounted
	} from 'vue'
	import trip from '@/api/trip.js'
	const props = defineProps({
		data: {
			type: Object,
			default: () => {}
		}
	})
	const show = ref(false)
	const form = ref({
		transport_type: '',
		pet_category: '',
		pet_nums: '',
		pet_weight: '',
		cage_type: '',
		pet_img: [],
		order_remark: '',
		people_num: '',
		luggage_info: '',
	})
	onMounted(() => {
		
	})
	const handleClick = () => {
		show.value = true
		form.value = props.data
		console.log(form.value);
		// form.value.transport_type = 1
		getSysParamFn()
	}
	const people = ref([])
	// 宠物品类
	const breed = ref([])
	// 宠物重量
	const weight = ref([])
	// 笼具
	const cage = ref([])
	const PetPeopleRef = ref()
	const PetBreedRef = ref()
	const PetCageRef = ref()
	const getSysParamFn = async () => {
		const {
			status,
			info,
			data
		} = await trip.getSysParam()
		if (status == 1) {
			console.log(data);
			breed.value = data.pet_category
			weight.value = data.pet_weight
			cage.value = data.cage_type
			people.value = data.people_num
			if(form.value.people_num && form.value.transport_type == 2) {
				PetPeopleRef.value.change()
			}
			if(form.value.pet_category) {
				PetBreedRef.value.change()
			}
			if(form.value.cage_type) {
				PetCageRef.value.change()
			}
		}
	}
	const emits = defineEmits(['change'])
	const handleSumbit = () => {
		show.value = false
		console.log(form.value);
		emits('change', form.value)
	}
</script>

<style lang="scss" scoped>
	.popup-content {
		text-align: left;

		.desc {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #A6A1A1;
			line-height: 33rpx;
			margin-bottom: 30rpx;
		}

		.type-line {
			display: flex;
			justify-content: space-between;

			view {
				width: calc(50% - 20rpx);
			}
		}

		.line {
			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.desc {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #989898;
					line-height: 34rpx;
					margin: 0;
				}
			}

			.content {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-top: 26rpx;

				.upload {
					width: calc((100vw - 52rpx - 80rpx) / 3);
					height: calc((100vw - 52rpx - 80rpx) / 3);
				}

				.item {
					width: calc((100% - 60rpx) / 4);
					display: flex;
					align-items: center;
					justify-content: center;
					background: #F6F6F6;
					border-radius: 16rpx;
					height: 58rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #2C1F21;
					line-height: 28rpx;
					border: 1px solid #f6f6f6;
				}

				.checked {
					background: #FFF8F8;
					border-radius: 8rpx;
					color: #F1692B;
					border: 2rpx solid #F1692B;
				}

				.item:nth-child(n+5) {
					margin-top: 20rpx;
				}

				.i {
					width: calc((100% - 60rpx) / 4);
				}
			}
		}

		.nflex {
			.desc {
				width: 100%;
				text-align: right;
			}
		}
	}
</style>